var ControlsView = function() {
	var self = this;
	this.bShowTools = false;
	this.bShowInput = false;
	this.bShowShare = false;
	this.changed = new signals.Signal();
	this.infoOpened = ''

	this.init = function(data) {
		
		$('#controls').hide();
		$('#add-constellation').hide();
		$('#cancel-selection').hide();
		
		// $('#info-buttons').hide()
		// $("#info-buttons").css({right:-80});
		
		$('#input-constellation').hide()
		$("#share").hide();

		$('#bt_save').click(function() {
			if(validate()){
				$('#cancel-selection').hide();
				self.changed.dispatch('save');
			}
		});

		$('#bt_cancel').click(function() {
			self.changed.dispatch('cancel');
		});

		$('#add-constellation').click(function(e) {
			e.preventDefault();
			$body.addClass('add-constellation');
			$('#cancel-selection').show();
			self.changed.dispatch('add');
		});

		$('#app-menu').click(function() {
			if(self.infoOpened == 'burger') {
				self.showInfo('');
				$(this).removeClass('active');
			}else {
				self.showInfo('burger');
				$(this).addClass('active');
			}
		});

		// $('#rockon').click(function() {
		// 	if(self.infoOpened == 'rockon') {
		// 		self.showInfo('')
		// 	}else {
		// 		self.showInfo('rockon')
		// 	}
		// })

		$('#redo-selection').click(function() {
			self.changed.dispatch('redo')
		});

		$('#done-selection').click(function() {
			if(validate){
				self.changed.dispatch('done')	
			}
		});

		$('#cancel-selection').click(function(e) {
			e.preventDefault();
			self.changed.dispatch('cancel');
			$('#cancel-selection').hide();
			$body.removeClass('add-constellation');
		});

		$("#color_value").change(function(evt){
			// console.log('COLOR CHANGED',$("#color_value").val() )
			self.changed.dispatch('color');
 		});

 		$("#color").on('input', function(evt) {
 			$("#color").val('')
 		});


 		$('#input_const_name').on('input', function(evt) {
 			// console.log('changing')
 			// $('#input_const_name').css('backgroundColor', '#ffffff')
 			$('#input_username').removeClass('error');
 		});

 		$('#input_username').on('input', function(evt) {
 			// console.log('changing')
 			// $('#input_username').css('backgroundColor', '#ffffff')
 			$('#input_username').removeClass('error');
 		});
 		

 		$('#myCanvas').on("mousedown", function(evt) {
 			$(this).addClass('dragging');
 		}).on("mouseup mouseout", function () {
 			$(this).removeClass('dragging');
 		});
	}

	this.showInfo = function(str) {
		
		switch(str) {
			case 'burger':
				TweenMax.to($('#info_burger'), 1, {css:{top:30}, ease: Back.easeOut})
				TweenMax.to($('#info_rockon'), 1, {css:{top: -$('#info_rockon').height() - 100}, ease: Back.easeOut})
			break;

			// case 'rockon':
			// 	TweenMax.to($('#info_burger'), 1, {css:{top: -$('#info_burger').height() - 100}, ease: Back.easeOut})
			// 	TweenMax.to($('#info_rockon'), 1, {css:{top:30}, ease: Back.easeOut})
			// break;

			case '':
				TweenMax.to($('#info_burger'), 1, {css:{top: -$('#info_burger').height() - 100}, ease: Back.easeOut})
				// TweenMax.to($('#info_rockon'), 1, {css:{top: -$('#info_rockon').height() - 100}, ease: Back.easeOut})
			break;
		}
		self.infoOpened = str;
	}

	this.state = function(type) {
		// console.log("[ControlsView] state", type)
		switch (type) {
			case 'SELECTION':
				this.showInfo('');
				self.hideControls();
				self.hideShare();
				$('#add-constellation').hide();
			break;

			case 'SHARE':
				self.hideInput();
 				self.showShare();
			break;

			case 'NAV':
				self.hideInput()
				self.hideControls()
				self.showAddButton()
				self.showInfoButtons()
			break;

			case 'SELECTING':
				self.showControls()
				self.hideShare();
			break;

			case 'DONE':
				self.hideControls()
				self.reset();
				self.showInput();
			break;
		}
	}

 	this.showAddButton = function() {
 		// $("#add-constellation").css({right:-80});
 		$('#add-constellation').show()
 		// TweenMax.to($('#add-constellation'), 1, {css:{right:10}, ease: Back.easeOut, delay:0.5})
 	}

 	this.showInfoButtons = function() {
 		
 		$('#info-buttons').addClass('visible');
 		// TweenMax.to($('#info-buttons'), 1, {css:{right:10}, ease: Back.easeOut, delay:0.5})
 	}

 	this.reset = function() {
 		$('#input_const_name').val('').change()
		$('#input_username').val('').change()
		document.getElementById('color').color.fromString('ffffff')
 	}

 	this.showShare = function() {
 		$("#share").show();
		// var py = $(window).height() - $('#share').height() - 20;
		// TweenMax.to($('#share'), 0.8, {css:{top:py}, ease: Back.easeOut})
 		self.bShowShare = true;
 	}
 	this.hideShare = function() {
 		// TweenMax.to($('#share'), 0.4, {css:{top:$(window).height() + 20}, onComplete:$('#share').hide, ease: Back.easeIn})
 		self.bShowShare = false;
 		$("#share").hide();
 	}

 	this.resize = function(b) {
 		this.showInfo('');
 	// 	var px = $(window).width() * .5 - $('#controls').width() *.5
 	// 	var py = $(window).height() + 10
 	// 	if(self.bShowTools){
 	// 		py = $(window).height() - $('#controls').height() - 10;	
 	// 	}
				
		// if(!TweenMax.isTweening($('#controls')))$('#controls').css({left: px, top: py});

		// var px = $(window).width() * .5 - $('#input-constellation').width() *.5
 	// 	var py = $(window).height() + 10
 	// 	if(self.bShowInput){
 	// 		py = $(window).height() - $('#input-constellation').height() - 30;	
 	// 	}
				
		// if(!TweenMax.isTweening($('#input-constellation')))$('#input-constellation').css({left: px, top: py});

		// var px = $(window).width() * .5 - $('#share').width() *.5
 	// 	var py = $(window).height() + 10
 	// 	if(self.bShowShare){
 	// 		py = $(window).height() - $('#share').height() - 20;	
 	// 	}
				
		// if(!TweenMax.isTweening($('#share')))$('#share').css({left: px, top: py});	
 	}
	
	this.showControls = function() {
		$('#controls').show();
		// var py = $(window).height() - $('#controls').height() - 10;
		// TweenMax.to($('#controls'), 0.8, {css:{top:py}, ease: Back.easeOut})
		self.bShowTools = true;
	}

	this.hideControls = function() {
		// TweenMax.to($('#controls'), 0.4, {css:{top:$(window).height() + 10}, onComplete:$('#controls').hide, ease: Back.easeIn})
		self.bShowTools = false;
		$('#controls').hide();
	}

	this.showInput = function() {
		$('#input-constellation').show();
		// var py = $(window).height() - $('#input-constellation').height() - 30;
		// TweenMax.to($('#input-constellation'), 0.8, {css:{top:py}, ease: Back.easeOut})
		$("#share").hide();
		self.bShowInput = true;
 	}

 	this.hideInput = function(){
 		// TweenMax.to($('#input-constellation'), 0.4, {css:{top:$(window).height() + 30}, onComplete:$('#input-constellation').hide, ease: Back.easeIn})
 		$("#share").hide();
 		$('#input-constellation').hide();
 		self.bShowInput = false;
 	}

 	function validate() {

 		var b = true;
 		if ($('#input_username').val().length ==0) {
 			b = false
 			$('#input_username').removeClass('error');
 		}
 		if ($('#input_const_name').val() == "") {
 			b = false
 			$('#input_const_name').addClass('error');
 		} 
 		return b
 	}


 
    return this

}
